<template>
  <div class="source-container">
    <!-- <draggable
      v-model="items"
      :options="{
        group: {
          name: 'shared',
          pull: 'clone',
          put: false,
        },
        ghostClass: 'ghost',
        forceFallback: true,
        animation: 150,
      }"
      class="draggable-list"
    >
      <template #item="{ element }">
        <div class="draggable-item">
          <SvgList class="icon-svg" :name="element.icon"></SvgList>
          {{ element.name }}
        </div>
      </template>
    </draggable> -->
    <div class="draggable-list">
      <template v-for="element in items">
        <div
          class="draggable-item"
          :draggable="true"
          @dragstart="handleDragStart($event, element)"
        >
          <SvgList class="icon-svg" :name="element.icon"></SvgList>
          {{ element.name }}
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import draggable from "vuedraggable";
import { containerComList } from "../baseScript";
// 源容器数据
const items = reactive(containerComList);
const handleDragStart = (e, item) => {
  // e.preventDefault();
  // console.log(item, "---");

  e.dataTransfer.setData(
    "application/json",
    JSON.stringify({
      name: item.name,
      type: item.type,
    })
  );
};
</script>

<style scoped lang="scss">
.source-container {
  flex: 1;
  /* min-height: 300px; */
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 4px;
}
.draggable-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.draggable-item {
  /* background-color: #f0f0f0; */
  border: 1px solid #ccc;
  padding: 6px 10px;
  margin: 0;
  width: 48%;
  margin-bottom: 4%;
  border-radius: 4px;
  cursor: move;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  text-align: center;
  ::v-deep {
    .icon-svg {
      width: 14px;
      height: 14px;
      margin-right: 2px;

      img {
        width: 14px;
        // height: 14px;
      }
    }
  }
}
.draggable-item:nth-child(2n) {
  margin-left: 4%;
}
.ghost {
  opacity: 0.4;
  background-color: #f0f0f0;
}
</style>
